import React from 'react';
import {
  ChakraProvider,
  Box,
  Text,
  Link,
  VStack,
  Code,
  Grid,
  Input,
  theme,
  Button,
  Flex,
  Tabs, TabList, TabPanels, Tab, TabPanel
} from '@chakra-ui/react';
import { ColorModeSwitcher } from './ColorModeSwitcher';
import Login from './Login';
import Register from './Register';

function App () {
  return (
    <ChakraProvider theme={theme}>
      <Box bgColor="#fff" w="400px" margin="0 auto" p="60px" mt="60px" pt="40px" pb="20px" boxShadow="0 0 8px rgb(0 0 0 / 10%)">
        <Tabs width="300px">
          <TabList width="140px" m="0 auto">
            <Tab _focus={{ boxShadow: "none" }} _selected={{ color: "#ea6f5a", borderBottom: "2px solid #ea6f5a", fontWeight: "bold" }}>登录</Tab>
            <Flex alignItems="center" fontSize="30">
              <Text >·</Text>
            </Flex>
            <Tab _focus={{ boxShadow: "none" }} _selected={{ color: "#ea6f5a", borderBottom: "2px solid #ea6f5a", fontWeight: "bold" }}>注册</Tab>
          </TabList>
          <TabPanels >
            <TabPanel p="0" marginTop="50px">
              <Login />
            </TabPanel>

            <TabPanel p="0" marginTop="50px">
              <Register />
            </TabPanel>
          </TabPanels>
        </Tabs>

      </Box>

    </ChakraProvider >
  );
}

export default App;
